﻿<%@ Page Title="偷乐网-快速注册" Language="C#" MasterPageFile="~/Account/Register.master"
    AutoEventWireup="true" CodeFile="reg1.aspx.cs" Inherits="Account_reg1" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="Server">
    <style type="text/css">
        .input_line
        {
            line-height: 50px;
            clear: both;
        }
        .input_label
        {
            float: left;
            width: 130px;
            text-align: right;
        }
        .input_label_font
        {
            font-size: 12pt;
            font-weight: bold;
        }
        input[type="text"], input[type="password"]
        {
            width: 200px;
            height: 23px;
            font-size: 13pt;
            font-weight: bold;
            border: 1px solid #BCE9F1;
        }
        input[type="button"]
        {
            height: 47px;
            width: 176px;
        }
    </style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="Server">
    <div style="border: 1px solid #5193D0; background-color: #f3f7fa">
        <div style="margin: 5px 40px 40px;">
            <div style="width: 100%; padding: 10px 0px;">
                <label style="color: #D91B5B; font-size: 18pt; font-weight: bold;">
                    10秒钟</label>
                <label style="color: #0C72D1; font-size: 12pt; font-weight: bold;">
                    快速开通偷乐网帐号</label></div>
            <div style="clear: both; height: 2px; width: 400px; border: 0px; background-color: #DBEEF1">
                &nbsp;
            </div>
            <div class="input_line">
                <div class="input_label">
                    <label class="input_label_font" for="txtEmail">
                        邮箱地址：</label>
                </div>
                <div style="float: left;">
                    <input type="text" runat="server" id="txtEmail" name="txtEmail" />
                </div>
            </div>
            <div class="input_line">
                <div class="input_label">
                    <label class="input_label_font" for="txtVerifyCode">
                        验证码：</label>
                </div>
                <div style="float: left;">
                    <input id="txtVerifyCode" name="txtVerifyCode" maxlength="4" style="width: 60px;"
                        type="text" runat="server" />
                    <div>
                        <img alt="验证码" title="点击切换图片" id="validImg" style="float: left; background-color: White;
                            vertical-align: middle;" /><div style="float: left; margin-left: 10px; line-height: 30px;">
                                验证码不区分大小写<br />
                                <a href="javascript:return void;" onclick="reloadVerifyCode();">看不清，换一张</a>
                            </div>
                    </div>
                    <script type="text/javascript">
                    var verifyCodeBaseUrl = "<%= PageHelper.Url("/account/VerifyCode.aspx?") %>";
                    var imgChangeCount = 1;
                    function reloadVerifyCode() {
                        imgChangeCount++;
                        if (imgChangeCount>10) {
                            return;
                        }
                        var newImgPath = verifyCodeBaseUrl + parseInt( Math.random()*10 );
                        $("#validImg").attr( "src", newImgPath );
                    }
                    $("#validImg").click( function () {
                        reloadVerifyCode();
                    });
                    reloadVerifyCode();
                    </script>
                </div>
            </div>
           
            <div class="input_line" style="padding-left: 50px; padding-top:20px;">
                <a id="btnRegister" href="#">
                    <div style="margin-left: 20px; float: left;">
                        <img src="../Images/register/verify-email.jpg" />
                    </div>
                </a>
            </div>
            <div class="input_line ui-state-highlight ui-corner-all" style="padding: 10px;">
                <div style="line-height: 22px;">
                    <img alt="验证说明" src="../Images/register/mail_icon.gif" style="width: 32px; height: 22px;" />
                    <label style="font-size: 14pt; font-weight: bold; color: gray;">
                        &nbsp;邮箱注册说明:</label>
                </div>
                <ul style="line-height: 22px;">
                    <li>注册帐号只接受真实有效的电子邮箱地址。</li>
                    <li>邮箱地址可以保护您的帐号安全，方便找回密码，并能够让我们及时偷乐网将您关注的重要信息第一时间推送给您。</li>
                    <li>点击”邮箱验证“按钮，偷乐网将会向您发送一封确认的邮件。点击邮件中的激活链接即可完成注册。</li>
                    <li>偷乐网发送给您的确认邮件可能需要几分钟的时间，请在<label style="color:red;font-weight:bold">24小时</label>内查收并点击激活链接。</li>
                    <li>抓紧时间完成注册，获得更多更精彩的注册用户体验。</li>
                </ul>
            </div>
        </div>
    </div>
    <script type="text/javascript">
  

        function checkVerifyCode() {
            var res = CommAjaxHelper.IsCorrectVerifyCode($("#MainContent_txtVerifyCode").val());
            if (!res.value) {
                reloadVerifyCode();
            }
            return res.value;
        }

        $().ready(function () {
            $("#Form1").validate({
                rules: {
                    ctl00$MainContent$txtEmail: {
                        required: true,
                        email: true,
                        customAjaxRemote: {
                            scope: ASP.account_reg1_aspx,
                            method: ASP.account_reg1_aspx.CheckEmailExists
                        }
                    },
                    ctl00$MainContent$txtVerifyCode: {
                        required: true,
                        minlength: 4,
                        customMethod: {
                            scope: this,
                            method: checkVerifyCode
                        }
                    }
                },
                messages: {
                    ctl00$MainContent$txtEmail: {
                        required: "请输入Email地址",
                        email: "请输入一个正确的Email地址",
                        customAjaxRemote: "该Email地址已经被注册"
                    },
                    ctl00$MainContent$txtVerifyCode: {
                        required: "请输入验证码",
                        minlength: "长度不正确",
                        customMethod: "验证码不正确"
                    }
                }
            });

            $("#btnRegister").click(function () { $("#Form1").submit(); });
            $("#MainContent_txtEmail").focus();
        });
    </script>
</asp:Content>
